<template>
  <div>
    <Dialog
      width="750px"
      v-model="showDialog"
      title="商品限购规则"
      :loading="loading"
      @confirm="formValidate"
      @close="cancel"
      @open="openDialog"
    >
      <el-form
        ref="ruleFormRef"
        v-loading="loading"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" placeholder="请填写标题" />
        </el-form-item>
        <el-form-item label="提示" prop="noneMatchMessage">
          <el-input
            v-model="formData.noneMatchMessage"
            placeholder="不满足规则时的提示信息"
          />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请填写描述"
            :rows="4"
          />
        </el-form-item>
        <el-form-item label="规则">
          <Limits
            v-model="limitsList"
            :options="setLimitCompontentList()"
            :disabled="false"
          ></Limits>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import Limits from "@/components/limits/Index.vue";
import { setLimitCompontentList } from "@/utils/index";
import {
  setSaveOrUpdateRule,
  getPageRules,
  getRuleDetail,
} from "@/api/pointsMall";
const props = defineProps({
  showDialog: Boolean,
  belong: String,
  id: [String, Number],
});

const { showDialog, id, belong } = toRefs(props);
const loading = ref(false),
  limitsList = ref({});
const ruleFormRef = ref();
const tableForm = ref({
  id: "",
  belong: "", //"归属：mall//商城，mall_goods//商品，mall_product//规格"
  currentPage: 1,
  showCount: -1,
  type: "pay",
});
const formData = ref({
  title: "",
  remark: "",
  noneMatchMessage: "", // 提示
  ruleType: "pay", // 折扣规则 discount， 限购规则 pay.
  expression: {},
  businessId: "",
  belong: belong?.value,
});
const rules = ref({
  title: [{ required: true, message: "请填写标题", trigger: "blur" }],
  matchValue: [{ required: true, message: "请填写折扣", trigger: "blur" }],
  expression: [{ required: true, message: "请添加表达式", trigger: "blur" }],
});
const openDialog = () => {
  tableForm.value = {
    id: String(id?.value),
    belong: String(belong?.value),
    currentPage: 1,
    showCount: -1,
    type: "pay",
  };
  getList();
};
// 获取列表
const getList = async () => {
  loading.value = true;
  let rs: any = await getPageRules(tableForm.value);
  if (rs.code === 200) {
    console.log("[ rs ]", rs);
    if (rs.payload.length == 0) {
      loading.value = false;
      return;
    }
    let res: any = await getRuleDetail({ id: rs.payload[0].id });
    if (res.code === 200) {
      formData.value = res.payload;
      limitsList.value = JSON.parse(res.payload.expression);
    }
  }
  loading.value = false;
};

const setSaveOrUpdateRuleData = async () => {
  formData.value.expression = JSON.stringify(limitsList.value);
  formData.value.businessId = String(id?.value);
  formData.value.belong = props.belong;

  let rs: any = await setSaveOrUpdateRule(formData.value);
  if (rs.code === 200) {
    ElMessage.success(`${formData.value["id"] ? "修改" : "添加"}限购规则成功`);
    confirm();
  }
};

const formValidate = () => {
  ruleFormRef.value.validate((valid: any, fields: any) => {
    if (valid) {
      setSaveOrUpdateRuleData();
    }
  });
};

const confirm = () => {
  emit("confirm");
  cancel();
};
const cancel = () => {
  setTimeout(() => {
    formData.value = {
      title: "",
      remark: "",
      noneMatchMessage: "", // 提示
      ruleType: "pay", // 折扣规则 discount， 限购规则 pay.
      expression: {},
      businessId: id?.value,
      belong: belong?.value,
    };
    ruleFormRef.value.resetFields();
  }, 500);
  emit("cancel", "showPurchaseRule");
};

const emit = defineEmits(["confirm", "cancel"]);
</script>
<style lang="scss" scoped>
.el-input-number {
  width: 100%;
}
</style>
